<template>
  <div class="expression">
    <div class="expression-top">
      <el-card class="expression-top-card">
        <el-form :inline="true" :model="queryModel" ref="queryFormRef">

          <el-form-item label="表情描述" prop="desc">
            <el-input v-model="queryModel.desc" placeholder="输入表情描述" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryMethod">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="rest('queryFormRef')">重置</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="insert" icon="el-icon-plus">新增</el-button>
          </el-form-item>

        </el-form>
      </el-card>
    </div>

    <div class="expression-middle">
      <el-card class="expression-middle-card">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            max-height="450px"
        >
          <el-table-column
              prop="name"
              label="姓名"
              width="180"
              :resizable="false"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              :resizable="false"
          >
          </el-table-column>


          <el-table-column
              fixed="right"
              label="操作"
              width="120"
              :resizable="false"
          >
            <template slot-scope="scope">
              <el-button @click="updateMethod(scope.row)" type="text" size="small" icon="el-icon-edit">修改</el-button>
              <el-button type="text" size="small" @click="deleteMethod(scope.row)" style="color: red" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </div>

    <div class="expression-bottom">
      <el-card class="expression-bottom-card">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="10">
        </el-pagination>
      </el-card>
    </div>

    <ADD :show="showChild" @closeChild="closeChild" :expressionModel="childModel"></ADD>
  </div>
</template>

<script>
import ADD from '@/views/admin/expression/add/index'

export default {
  components: {ADD},
  name: "index",
  data() {
    return {
      queryModel: {},
      tableData: [
        {
          name: "张三",
          address: "北京市"
        }
      ],
      showChild: false,
      childModel: {}
    }
  },
  methods: {
    //查询方法
    queryMethod() {

    },
    //重置表单
    rest(val) {
      this.$refs[val].resetFields()
      this.queryMethod()
    },
    //新增表情
    insert() {
      this.showChild = true
      this.childModel = {}
    },
    //修改
    updateMethod(val) {
      this.showChild = true
      this.childModel = val
    },
    //删除
    deleteMethod() {

    },
    closeChild(val) {
      this.showChild = val
    }
  }
}
</script>

<style scoped lang="scss">
.expression {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.expression-top {
  flex: 1;

  .expression-top-card {
    margin: 10px;
  }
}

.expression-middle {
  flex: 8;

  .expression-middle-card {
    margin: 10px;
  }
}

.expression-bottom {
  flex: 1;

  .expression-bottom-card {
    margin: 10px;
    text-align: center;
  }
}
</style>